<template>
  <div v-show="isShowPage">
    <div class="ub ub-ver textBox" v-show="showTips">
      <div class="ub">温馨提示：</div>
      <div class="closeTips ub-img" @click="showTips = !showTips"></div>
      <div class="ub">
        请注意您的机票是否包含免费托运行李，我们为您提供了以下增值服务产品，欢迎选购。增值服务产品预订后不能单独退订，购买前请仔细阅读购买说明，如果发生航班变更请联系呼叫中心95373。
      </div>
    </div>
    <div class="ub ub-ver pad_1" v-show="hasBaggage">
      <div class="ub ub-pj  fz08">
        <div class="ub ub-ac">
          <div class="ub-img orderPack"></div>
          <div class="ub ub-ac margin-l05">逾重行李</div>
        </div>
        <div class="ub ub-ac" @click="xlsm">
          <div class="ub ub-ac fz08 fc-8b">行李说明</div>
          <div class="ub margin-l05 ub-img question"></div>
        </div>
      </div>
      <div class="ub ub-ac total fz08">
        <div class="ub ub-ac">合计：</div>
        <div class="ub ub-ac margin-l05 foucus">{{'￥' + sumbag().sum}}</div>
      </div>
      <div class="ub oneBox" v-if="addValue.passengers.length>0 && item.piType!='婴儿'" v-for="(item, index) in addValue.passengers">
        <div class="ub ub-ver ub-f1">
          <div class="ub pad_b05">{{item.piName}}</div>
          <div class="ub ub-pj ub-f1" @click="selBaggagepiId(item.piId)">
            <!-- <div class="ub"></div> -->
            <div class="ub foucus ub-ac ub-f1" v-if="typeof addValue.seledBag[item.piId] != 'number'">请选择托运行李规格</div>
            <div class="ub foucus ub-ac ub-f1" v-if="typeof addValue.seledBag[item.piId] == 'number'">
              {{addValue.baggage[addValue.seledBag[item.piId]].goodsChName + '+￥' + addValue.baggage[addValue.seledBag[item.piId]].goodsPrice}}
            </div>
            <div class="ub arrow_right ub-img"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="ub ub-ver pad_1" v-show="hasMeal" style="border-top: 1px solid #f2f2f2;">
      <div class="ub ub-pj  fz08">
        <div class="ub ub-ac">
          <div class="ub-img orderFood"></div>
          <div class="ub ub-ac margin-l05">机上餐食</div>
        </div>
        <div class="ub ub-ac"@click="cssm">
          <div class="ub ub-ac fz08 fc-8b">餐食说明</div>
          <div class="ub margin-l05 ub-img question"></div>
        </div>
      </div>
      <div class="ub ub-ac total fz08">
        <div class="ub ub-ac">合计：</div>
        <div class="ub ub-ac margin-l05 foucus">{{'￥' + sumMeal().sum}}</div>
      </div>
      <div class="ub ub-ver oneBox" v-if="addValue.meal.length>0 && addValue.passengers.length>0 && item.piType!='婴儿'" v-for="(item, index) in addValue.passengers">
        <div class="ub pad_b05">{{item.piName}}</div>
        <div class="ub ub-pj" @click="selMealpiId(item.piId)">
          <!-- <div class="ub"></div> -->
          <div class="ub foucus ub-ac" v-if="!showMealDetail(item.piId)">请选择餐食</div>
          <div class="ub foucus ub-ac fz08" v-if="showMealDetail(item.piId)" v-html="showMealDetail(item.piId)"></div>
          <div class="ub arrow_right ub-img"></div>
        </div>
      </div>
    </div>
    <div class="ub zanwei"></div>
    <div class="footer">
      <div class="ub">
        <div class="ub ub-pj wd_70 detail">
          <div class="ub ub-ac fz12 foucus">{{'￥'+(airTicketOrder.passengers.priceCount + airTicketOrder.passengers.zhifuchuli + sumbag().sum + sumMeal().sum)}}</div>
          <div class="ub ub-ac" @click="showDeatil = !showDeatil;aa()">
            <div class="ub ub-ac fc-8b">明细</div>
            <div class="ub-img arrow_up margin-l05" :class="{'arrow_up':!showDeatil ,'arrow_down':showDeatil}"></div>
          </div>
        </div>
        <div class="ub ub-ver wd_30 next ub-pe" @click="goNext">
          <div class="ub ub-ac ub-pc">下一步</div>
          <div class="ub ub-ac ub-pc">确认订单</div>
        </div>
      </div>
      <div class="detaiBox fz08" @click="showDeatil = !showDeatil;aa()" v-show="showDeatil">
        <div class="ub ub-ver">
          <div class="ub ub-pj wd_100 pad_05 bs_bb">
            <div class="ub ub-ac wd_30">成人票</div>
            <div class="ub ub-ac ub-pc red">{{'￥' + airTicketOrder.passengers.adtpri}}</div>
            <div class="ub ub-ac ub-pc">{{'×' + airTicketOrder.passengers.adtNum}}</div>
            
          </div>
           <div class="ub ub-pj wd_100 pad_05 bs_bb">
            <div class="ub ub-ac wd_30">{{fyName}}</div>
            <div class="ub ub-ac ub-pc red">{{'￥'+airTicketOrder.passengers.jijian}}</div>
            <div class="ub ub-ac ub-pc">{{'×' + airTicketOrder.passengers.adtNum}}</div>
            
          </div> 
          <div class="ub ub-pj wd_100 pad_05 bs_bb" v-show="airTicketOrder.passengers.cnnNum != 0">
            <div class="ub ub-ac wd_30">儿童票</div>
            <div class="ub ub-ac ub-pc red">{{'￥' +  airTicketOrder.passengers.cnnpri}}</div>
            <div class="ub ub-ac ub-pc">{{'×' + airTicketOrder.passengers.cnnNum}}</div>
            
          </div>
           <div class="ub ub-pj wd_100 pad_05 bs_bb" v-show="+airTicketOrder.passengers.jijianranyou_ertong!==0">
            <div class="ub ub-ac wd_30">{{fyName}}</div>
            <div class="ub ub-ac ub-pc red">{{'￥'+airTicketOrder.passengers.jijianranyou_ertong}}</div>
            <div class="ub ub-ac ub-pc">{{'×' + airTicketOrder.passengers.cnnNum}}</div>
            
          </div>
          <div class="ub ub-pj wd_100 pad_05 bs_bb" v-show="airTicketOrder.passengers.infNum != 0">
            <div class="ub ub-ac wd_30">婴儿票</div>
             <div class="ub ub-ac ub-pc red">{{'￥' + airTicketOrder.passengers.infpri}}</div>
            <div class="ub ub-ac ub-pc">{{'×' + airTicketOrder.passengers.infNum}}</div>
           
          </div>
         
         
          <div class="ub ub-pj wd_100 pad_05 bs_bb" v-show="airTicketOrder.passengers.zhifuchuli!==0">
            <div class="ub ub-ac wd_30">支付处理费</div>
            <div class="ub ub-ac ub-pc"></div>
            <div class="ub ub-ac ub-pc red">{{'￥' + airTicketOrder.passengers.zhifuchuli}}</div>
          </div>
          <div class="ub ub-pj wd_100 pad_05 bs_bb" v-show="sumbag().sum">
            <div class="ub ub-ac wd_30">托运行李额</div>
            <div class="ub ub-ac ub-pc">{{sumbag().sumKg + '公斤'}}</div>
            <div class="ub ub-ac ub-pc red">{{'￥' + sumbag().sum}}</div>
          </div>
          <div class="ub ub-pj wd_100 pad_05 bs_bb" v-show="sumMeal().sum">
            <div class="ub ub-ac wd_30">机上餐食</div>
            <div class="ub ub-ac ub-pc">{{sumMeal().sumTimes + '份'}}</div>
            <div class="ub ub-ac ub-pc red">{{'￥' + sumMeal().sum}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="selBaggage" v-show="showSelBaggage">
      <div class="ub ub-ver">
        <div class="ub selItem">
          <div class="ub ub-ac ub-f1" @click="selBaggage('cannel')">请选择托运行李规格</div>
          <div class="ub ub-ac">
            <div class="ub-img form_radio form_radio uhide"></div>
          </div>
        </div>
        <div class="ub selItem" v-if="addValue.baggage.length > 0" v-for="(item, index) in addValue.baggage" @click="selBaggage(index)">
          <div class="ub ub-ac ub-f1">
            {{item.goodsChName + '+￥' + item.goodsPrice}}
          </div>
          <div class="ub-img form_radio form_radio uhide"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex';
// import sData from './addValue.js';
const random = 'sln3q6q4gvtewjrlyeg4vusqflv4551c';
// const normalValueId = '402'; // 无默认勾选
// const defaultValueId = '400'; // 有默认勾选
// const actionValueId = '398'; // 活动的勾选
const bindBag = false; // H5无活动
// * @param uri          航班uri
// * @param segmentIndex 航班ID , 貌似不是航班id，1是去程
// * @param bindBag true-活动订单，false-非活动订单
// const passengers = [
//   { piId: '1', piType: '成人', piName: 'TTTT1' },
//   { piId: '2', piType: '成人', piName: 'TTTT2' },
//   { piId: '3', piType: '成人', piName: 'TTTT3' },
//   { piId: '4', piType: '儿童', piName: 'TTTT4' },
//   { piId: '5', piType: '婴儿', piName: 'TTTT5' }
// ]
// const segmentIndex = '1';
// const uri = '5a041603e4b0c0d3b49618c1';
export default {
  created: function () {
    this.$store.commit('changeHeader', { // 提交首页header
      left: '返回',
      right: '',
      middle: '增值服务',
      ifshow: true,
      leftAction: '-1',
      leftIcon: 'leftIcon',
      rightAction: '',
      rightIcon: ''
    });
    if (!this.loginData.isLogin) {
      this.$router.push('/login');
      return false;
    }
    console.log(this.addValue.ifInit)
    if (!this.addValue.ifInit) {
      console.log(1)
      this.initAction();
    } else {
      console.log(2)
      this.isShowPage = true;
      if (this.addValue.meal.length > 0) {
        this.hasMeal = true;
      }
      if (this.addValue.baggage.length > 0) {
        this.hasBaggage = true;
      }
    }
    this.fyName = this.ishome.data ? '税费+燃油' : '税费+燃油'
  },
  data: function () {
    return {
      isShowPage: false,
      showTips: true,
      showDeatil: false,
      showSelBaggage: false,
      selPersonpiId: '',
      hasMeal: false,
      hasBaggage: false,
      fyName: ''
      // passengers: ''
    }
  },
  components: {
  },
  computed: mapState(['loginData', 'addValue', 'airTicketOrder', 'ishome']),
  methods: {
    aa: function () {
      console.log(this.addValue)
    },
    xlsm: function () {
      let content = {
        'columnId': '137',
        'detail': '',
        'listTitle': '行李说明',
        'detailTitle': '',
        'newsTypeId': '',
        'firstDate': [],
        'secondDate': []
      }
      this.$store.commit('sethelpCenter', content);
      this.$router.push('/helpCenterList')
    },
    cssm: function () {
      let content = {
        'columnId': '139',
        'detail': '',
        'listTitle': '餐食说明',
        'detailTitle': '',
        'newsTypeId': '',
        'firstDate': [],
        'secondDate': []
      }
      this.$store.commit('sethelpCenter', content);
      this.$router.push('/helpCenterList')
    },
    getHeader: function () {
      let userInfo = this.loginData.userInfo;
      let loginToken = userInfo.token.loginToken;
      let userId = userInfo.userId;
      let body = { columnId: '148' }
      let header = {
        appFrom: 'westAirH5',
        appPlatform: 'NativeH5',
        // devImei: "863330030091158",
        // devModel: "Meizu M1 E",
        // devSystem: "Android",
        // devToken: "863330030091158",
        loginToken: loginToken,
        // systemVersion: "Android 7.0",
        token: loginToken,
        userId: userId,
        versionCode: 'westAirH5'
      }
      let data = {
        body: JSON.stringify(body),
        header: JSON.stringify(header),
        appiId: 'westAirH5',
        random: random,
        timestamp: new Date().getTime(),
        token: loginToken,
        version: 'westAirH5'
      }
      let self = this;
      this.$utils.ajax(data, 'addValuetext', self, function (res) {
        console.log(res)
      })
    },
    getGoodsInfo: function () {
      let userInfo = this.loginData.userInfo;
      let loginToken = userInfo.token.loginToken;
      let userId = userInfo.userId + '';
      let airTicketOrder = this.airTicketOrder.passengers;
      console.log('airTicketOrder');
      console.log(airTicketOrder);
      let body = {
        // bindBag: airTicketOrder.bindBag,
        bindBag: bindBag,
        segmentIndex: airTicketOrder.segmentIndex,
        uri: airTicketOrder.uri
      };
      console.log('body');
      console.log(body);
      // let heads = {
      //   // "devModel": "iPhone",
      //   appPlatform: 'NativeH5',
      //   // "devSystem": "iOS",
      //   // "devImei": "BDC9921442384C6A",
      //   appFrom: 'westAirH5',
      //   // "systemVersion": "0",
      //   // "versionCode": "0",
      //   // "devToken": "BDC9921442384C6A",
      //   timestamp: timestamp
      // }
      let header = {
        appFrom: 'westAirH5',
        appPlatform: 'NativeH5',
        devImei: 'westAirH5',
        devModel: 'westAirH5',
        devSystem: 'westAirH5',
        devToken: 'westAirH5',
        loginToken: loginToken,
        systemVersion: 'westAirH5',
        token: loginToken,
        userId: userId,
        versionCode: 'westAirH5'
      }
      let data = {
        body: JSON.stringify(body),
        header: JSON.stringify(header),
        appiId: 'westAirH5',
        random: random,
        timestamp: new Date().getTime() + '',
        token: JSON.stringify(loginToken),
        version: 'westAirH5'
        // emulateJSON: true
      }
      // data = JSON.stringify(data)
      let self = this;
      console.log(data);
      this.$utils.$ajax(data, 'addValueGoods', self, function (res) {
        console.log(res)
        self.isShowPage = true;
        self.getGoodsSuccess(res);
      });
      // this.getGoodsSuccess(sData); // test
    },
    initAction: function () {
      // this.getHeader();
      this.getGoodsInfo();
    },
    goNext: function () {
      // console.log('>>>>>>>>>>>>>>');
      let addValue = this.addValue;
      let seledBag = addValue.seledBag;
      let seledMeal = addValue.seledMeal;
      let baggage = addValue.baggage;
      let meal = addValue.meal;
      let auxiliarygo = [];
      let bag = this.sumbag();
      let bagSum = bag.sum;
      let bagKg = bag.sumKg;
      let mealObj = this.sumMeal();
      let mealSum = mealObj.sum;
      let mealTime = mealObj.sumTimes;
      // let airTicketOrder = this.airTicketOrder.passengers;
      this.$store.commit('setShowDetails', { bagSum, bagKg, mealSum, mealTime });
      // this.$store.commit('setAirTicketOrder', airTicketOrder)
      for (let key in seledBag) { // 生成行李
        let value = seledBag[key];
        if (typeof value === 'number') {
          let westAirGoodsid = baggage[value].westAirGoodsid
          let obj = {
            auxiliary: [],
            pid: key
          }
          obj.auxiliary.push(westAirGoodsid);
          auxiliarygo.push(obj);
        }
      };
      // console.log('行李');
      // console.log(auxiliarygo);
      seledMeal.forEach(function (item, index) {
        for (let key in item) {
          let value = item[key];
          if (typeof value === 'number') {
            let westAirGoodsid = meal[index].data[value].westAirGoodsid
            let obj = {
              auxiliary: [],
              pid: key
            }
            obj.auxiliary.push(westAirGoodsid);
            auxiliarygo.push(obj);
          }
        }
      });
      this.$store.commit('setIfInit', true);
      this.$store.commit('setAuxiliarygo', auxiliarygo);
      // console.log('餐食');
      // console.log(auxiliarygo);
      this.$router.push('/confirmOrder')
    },
    getGoodsSuccess: function (data) {
      let ADT = data.content.ADT;
      console.log(ADT);
      if (JSON.stringify(ADT) === '{}') {
        let content = {
          text: '无增值服务'
        }
        this.$store.dispatch('showTx', content);
        return false;
      }
      let baggage = ADT.baggage[0].data;
      let meal = ADT.meal;
      this.$store.commit('setBaggage', baggage);
      if (meal) {
        this.hasMeal = true
        this.$store.commit('setMeal', meal);
      } else {
        this.hasMeal = false
      }
      if (baggage) {
        this.hasBaggage = true
      }
      this.getPassengers();
    },
    getPassengers: function () {
      this.$store.commit('setAddPassenger', this.airTicketOrder.passengers.passengers);
    },
    selBaggagepiId: function (piId) {
      console.log(piId);
      this.selPersonpiId = piId;
      this.showSelBaggage = true;
    },
    selBaggage: function (index) {
      if (index === 'cannel') {
        index = null;
      }
      this.showSelBaggage = false;
      let piId = this.selPersonpiId;
      if (!piId) {
        return false;
      }
      this.$store.commit('setSeledBag', { piId, index })
      console.log(index);
    },
    selMealpiId: function (piId) {
      console.log('piId' + piId);
      if (!piId) {
        return false;
      }
      this.$store.commit('setSeledpiId', piId);
      this.$router.push('/selFoods')
    },
    sumbag: function () {
      let sum = 0;
      let sumKg = 0;
      let addValue = this.addValue;
      let passengers = addValue.passengers;
      let seledBag = addValue.seledBag;
      passengers.forEach(function (item, index) {
        let piId = item.piId;
        let selIndex = seledBag[piId];
        if (typeof selIndex === 'number') {
          sum += addValue.baggage[selIndex].goodsPrice;
          sumKg += (selIndex + 1) * 10 // 计算公斤数
        }
      });
      return { sum, sumKg };
    },
    sumMeal: function () {
      let sum = 0;
      let addValue = this.addValue;
      let sumTimes = 0;
      // let passengers = addValue.passengers;
      let seledMeal = addValue.seledMeal;
      seledMeal.forEach(function (item, index) {
        for (let key in item) {
          let selIndex = item[key];
          if (typeof selIndex === 'number') {
            sum += addValue.meal[index].data[selIndex].goodsPrice;
            sumTimes++;
          }
        }
      });
      console.log(sum)
      return { sum, sumTimes };
    },
    showMealDetail: function (piId) {
      let str = '';
      let addValue = this.addValue;
      // let passengers = addValue.passengers;
      let seledMeal = addValue.seledMeal;
      seledMeal.forEach(function (item, index) {
        let selIndex = item[piId];
        if (typeof selIndex === 'number') {
          str += addValue.meal[index].data[selIndex].goodsChName + '</br>';
        }
      });
      return str;
    }
  }
}
</script>

<style lang="stylus" scoped >
@import '../../stylus/base.styl';
.arrow_right
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('arrow_right@2x.png');
.arrow_up
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('arrow_up@2x.png');
.arrow_down
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('arrow_down@2x.png');
.orderPack
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('order_pack.png');
.orderFood
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('shipin@2x.png');
.question
  width: f_times(1.1);
  height: f_times(1.1);
  background-image: url('question.png');
.textBox
  box-sizing: border-box;
  padding: f_times(0.5) f_times(1);
  font-size: f_times(0.8);
  line-height: f_times(1.2);
  color: #854A95;
  background-color: #EEDAF5;
  position: relative;
.closeTips
  width: f_times(1.2);
  height: f_times(1.2);
  background-image: url('close_tips.png');
  position: absolute;
  top: f_times(0.2);
  right: f_times(1);
.total
  padding: f_times(0.5) f_times(2) f_times(0.5);
  border-bottom: 1px solid #f2f2f2;
.foucus
  color: #FFA314;
.oneBox
  padding: f_times(0.5) 0 f_times(0.5) f_times(2);
  box-sizing: border-box;
.footer
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  border-top: 1px solid #f2f2f2;
  // box-sizing: border-box;
  >div
    // padding: f_times(1);
    width: 100%;
    // box-sizing: border-box;
    background-color: #fff;
.wd_70
  width: 70%;
.wd_30
  width: 30%;
.next
  padding: f_times(0.6) f_times(0.6) f_times(0.6) 0;
  box-sizing: border-box;
  background-color: #843D99;
  color: #fff;
.detail
  padding: f_times(0.6) f_times(0.2) f_times(0.6) f_times(1.5);
  box-sizing: border-box;
.selBaggage
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  >div
    width: 100%;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
  .selItem
    padding: f_times(0.8);
    font-size: f_times(1.1);
.zanwei
  width: 0;
  height: 0;
  padding-bottom: f_times(2.5);
.detaiBox
  position: fixed;
  top: 0;
  bottom: f_times(3.2);
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5) !important;
  >div
    position: absolute;
    background-color: #fff;
    width: 100%;
    bottom: 0;
    box-sizing: border-box;
    padding: f_times(1) f_times(0.5);
.red
  color: #F4423D;
</style>